o<template>
  <div class="wll_order">
    <!-- 顶部盒子布局 -->
    <div class="wll_order_top">
      <p>
        <!-- 点击箭头返回上一页 -->
        <!-- <span class="wll_span" @click="wll_Return">&lt;</span> -->
        <span class="wll_span1">我的订单</span>
      </p>
    </div>
    
    <div class="wll_Switc">
      <van-tabs v-model="active" title-active-color="6fbd9b" @click="tag">
        <van-tab title="全部订单"></van-tab>
        <van-tab title="待支付"></van-tab>
        <van-tab title="交易完成"></van-tab>
        <van-tab title="交易关闭"></van-tab>
      </van-tabs>
    </div>
    <div class="wll_content">
      <!-- 全部订单 -->
      <AllOrders v-show="allorders"></AllOrders>
      <!-- 待支付 -->
      <Unpaid v-show="unpaid"></Unpaid>
      <!-- 交易完成 -->
      <Transaction v-show="transaction"></Transaction>
      <!-- 交易关闭 -->
      <Shut v-show="shut"></Shut>
    </div>
  </div>
</template>

<script>
  // 引入全部订单组件
  import AllOrders from "./AllOrders";
  // 引入待支付组件
  import Unpaid from "./Unpaid";
  // 引入交易完成组件
  import Transaction from "./Transaction";
  // 引入交易关闭组件
  import Shut from "./Shut";
  export default {
    name: 'order',
    components: {
      AllOrders, 
      Unpaid, 
      Transaction, 
      Shut
    },
    data() {
      return {
        active: "a",
        // 全部订单
        allorders:true, 
        // 待支付
        unpaid:false, 
        // 交易完成
        transaction:false, 
        // 交易关闭
        shut:false
      }
    },
    methods: {
      // 点击事件，点击箭头，返回上一页
      wll_Return() {
        // 点击箭头，返回上一页
        this.$router.go(-1);
      },
      tag(name,title){
        console.log(name)
        console.log(title)
        if(title == "全部订单"){
          // 全部订单
          this.allorders = true;
          // 待支付
          this.unpaid = false;
          // 交易完成
          this.transaction = false;
          // 交易关闭
          this.shut = false
        } else if(title == "待支付"){
          // 全部订单
          this.allorders = false;
          // 待支付
          this.unpaid = true;
          // 交易完成
          this.transaction = false;
          // 交易关闭
          this.shut = false
        }else if(title == "交易完成"){
          // 全部订单
          this.allorders = false;
          // 待支付
          this.unpaid = false;
          // 交易完成
          this.transaction = true;
          // 交易关闭
          this.shut = false
        }else if(title == "交易关闭"){
          // 全部订单
          this.allorders = false;
          // 待支付
          this.unpaid = false;
          // 交易完成
          this.transaction = false;
          // 交易关闭
          this.shut = true
        }
      }
    }
  }
</script>

<style lang="scss">
  .wll_order{
    width: 100%;
    height: 100%;
    background: #ffffff;
    .wll_order_top{
      width: 100%;
      height: 1.3rem;
      background: #ffffff;
      border-bottom: 1px solid #f1f2f5;
      p{
        width: 100%;
        height: 1.3rem;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .wll_span{
          margin-left: 0.2rem;
          font-size: 0.36rem;
        }
        .wll_span1{
          font-size: 0.36rem;
          margin: 0 auto;
          display: block;
        }
      }
    }

    .wll_content{
      width: 100%;
      height: 66%;
    }

    .wll_Switc{
      width: 100%;
      height: 1.3rem;
      border-bottom: 1px solid #f1f2f5;
      .van-tabs {
        height: 100%;
        .van-tabs__wrap {
          height: 100%;
          .van-tabs__nav{
            .van-tab {
              line-height: 1.3rem;
            }
          }
        }
      }
    }
  }

  .van-tab__text{
    font-size: 0.3rem;
  }

  .van-tabs__line {
    background-color: #6fbd9b;;
  }
</style>
